<template>
  <div class="margin30">
    <el-row>
      <el-col :span="8">
        <div>
          <el-card shadow="never" class="el-card-height">
            <div class="scrollbar-height">
              <div
                v-for="(item, index) in subject_data"
                :key="index"
                class="margin10 clearfix"
                :class="subject_active.index === index ? 'subject_active' : ''"
              >
                <div class="fl" @click="subjectActive(item, index)">
                  <span>{{ item.label }}</span>
                </div>
                <div class="fr">
                  <el-button type="text" @click="editNav('subject', item, index)">修改</el-button>
                  <el-button type="text" @click="deleteNav(item, index)">删除</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="btu-position">
          <el-button type="primary" @click="open('subject')">添加</el-button>
        </div>
      </el-col>
      <el-col v-if="subject_active !== ''" :span="16">
        <div>
          <el-card shadow="never" class="el-card-height">
            <div class="clearfix">
              <el-button size="small" type="success" class="fr" @click="open('first_menu')">添加二级菜单</el-button>
            </div>
            <!--      标签      -->
            <el-tabs
              v-if="first_menu && first_menu.length > 0"
              v-model="activeName"
              @edit="deleteSecondNav"
            >
              <el-tab-pane v-for="(item, indexs) in first_menu" :key="indexs">
                <div v-if="item.label" slot="label">
                  <span>{{ item.label }}</span>
                  <i
                    class="el-icon-edit fs-16 icon-hover marginL10"
                    @click="editNav('first_menu', item, indexs)"
                  />
                  <i
                    class="el-icon-close fs-18 icon-hover marginL10"
                    @click="deleteNav(item, indexs)"
                  />
                </div>
                <div class="scrollbar-height__tag">
                  <div v-for="(items, index) in item.subNavigationList" :key="index">
                    <el-card shadow="never" class="marginT10">
                      <div class style="display: flex; justify-content: space-between;">
                        <h3 class="marginB10">{{ items.label }}</h3>
                        <div>
                          <el-button
                            type="text"
                            @click="editNav('third_menu', items, index, indexs)"
                          >编辑</el-button>
                          <el-button type="text" @click="deleteNav(items, index, indexs)">删除</el-button>
                        </div>
                      </div>
                      <div>
                        <el-tag
                          v-for="(tag, tagIndex) in items.navigationTagsVoList"
                          :key="tag.navTagsId+''+tag.tagsId"
                          closable
                          :type="tag.type"
                          class="margin5"
                          @close="handleCloseTag(tag,tagIndex, index, indexs )"
                        >{{ tag.tagsName }}</el-tag>
                        <div class="margin5">
                          <el-button
                            type="primary"
                            @click="openThirdDialog(items, index, indexs)"
                          >添加</el-button>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
        <div class="btu_position__wrap">
          <el-button type="primary" @click="open('third_menu')">添加三级分类</el-button>
          <!-- <el-button type="success" @click="open('imgs')">添加图片分类</el-button> -->
        </div>
      </el-col>
    </el-row>

    <!--公用添加分类-->
    <el-dialog
      title="完善分类信息"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="级别">
          <div class="block myCascader">
            <!-- <el-cascader :props="props" /> -->
            <!-- @change="handleChange" -->
            <el-cascader
              ref="myCascader"
              v-model="value_third"
              :options="options"
              :props="props"
              :disabled="value_addOrEdit"
              :placeholder="value_third_name ? value_third_name : '请选择分类'"
              style="width: 100%;"
              @change="handleChange"
            />
          </div>
        </el-form-item>
        <el-form-item v-if="form.label !== null" label="名称">
          <el-input v-model="form.label" @keyup.enter.native="submitFirstMenu" />
        </el-form-item>

        <!-- <el-form-item v-if="level.length >= 1 && level[0] != 'CUSTOM'" label="名称">
          <el-select v-model="form.label" placeholder="请选择">
            <el-option
              v-for="item in listByKind"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeCommen">取 消</el-button>
        <el-button type="primary" @click="submitFirstMenu">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加分类end-->

    <!--公用添加四级分类-->
    <el-dialog title="添加四级菜单" :visible.sync="dialogVisible_third" :before-close="handleClose">
      <div class="four-menu-box">
        <ul class="four-menu-left">
          <li
            v-for="(item, index) in four_menu.tagsKindList"
            :key="index"
            :class="four_active.first_index === index ? 'active' : ''"
            @click="fourActive(item, index, 'first_index')"
          >{{ item.TagsKindName }}</li>
        </ul>
        <ul v-if="four_menu.tagsList.length > 0" class="four-menu-left">
          <li
            v-for="(item, index) in four_menu.tagsList"
            :key="index"
            :class="four_active.second_index === index ? 'active' : ''"
            @click="fourActive(item, index, 'second_index')"
          >{{ item.groupName }}</li>
        </ul>
        <ul
          v-if="
            four_menu.tagsList.length > 0 &&
              four_menu.tagsList[four_active.second_index] &&
              four_menu.tagsList[four_active.second_index].tagsVoList
          "
          class="four-menu-left"
        >
          <li>
            <el-checkbox-group v-model="four_active.third_checkboxGroup">
              <el-checkbox
                v-for="(item, index) in four_menu.tagsList[
                  four_active.second_index
                ].tagsVoList"
                :key="index"
                :label="item.tagsId"
                :disabled="item.checked"
                @change="fourActive(item, index, 'third_index')"
              >{{ item.tagsName }}</el-checkbox>
            </el-checkbox-group>
          </li>
        </ul>
        <ul
          v-if="
            four_menu.tagsList.length > 0 &&
              four_menu.tagsList[four_active.second_index] &&
              four_menu.tagsList[four_active.second_index].tagsVoList &&
              four_menu.tagsList[four_active.second_index].tagsVoList[
                four_active.third_index
              ].sub
          "
          class="four-menu-left"
        >
          <li>
            <el-checkbox-group v-model="four_active.four_checkboxGroup">
              <el-checkbox
                v-for="(item, index) in four_menu.tagsList[
                  four_active.second_index
                ].tagsVoList[four_active.third_index].sub"
                :key="index"
                :disabled="item.checked"
                :label="item.tagsId"
              >{{ item.tagsName }}</el-checkbox>
            </el-checkbox-group>
          </li>
        </ul>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeThird">取 消</el-button>
        <el-button type="primary" @click="submitThird">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加分类end-->
  </div>
</template>

<script>
import { options } from './data.js';
import {
  createNavigationTags,
  createRankNavigation,
  deleteNavigation,
  deleteNavigationTags,
  findFirstRankNavigation,
  findNavigationByFirstRank,
  findTags,
  updateRankNavigation
} from '@/api/navigation';

import { listByKind } from '@/api/basic';

export default {
  name: 'NavigationForm',
  components: {},
  data () {
    return {
      copyVal: '数据链接',
      subject_active: '', // 主要分类选项
      subject_data: '', // 主要分类数据
      level: '', // 当前级别选项
      listByKind: '', // 当前级别字典
      isClick: true,
      props: {
        lazy: true,
        lazyLoad (result, resolve) {
          console.log('result:', result.value);
          if (result.data.value !== 'CAGEGORY' && result.data.value !== 'BIZ' && result.data.value !== 'CUSTOM') {
            if (result.data.lazy) {
              resolve(result);
            } else {
              listByKind({
                dictKind: result.data.value
              }).then(res => {
                res.data.map(item => {
                  item.value = item.code;
                  item.label = item.name;
                  item.lazy = true;
                  item.children = [];
                  item.leaf = 2;
                });
                resolve(res.data);
              });
            }
          } else if (result.data.value === 'BIZ') {
            result.data.children.map(item => {
              item.leaf = 2;
            });
            resolve(result);
          } else {
            resolve(result);
          }
        }
      },
      // third_index: 0,
      // third_indexs: 0,
      value_third: '',
      value_third_name: '',
      value_addOrEdit: false,
      add_select: '', //
      options: options, // 三级菜单选项
      select: '', // 级别选项
      first_menu: '', // 一级菜单的子标签
      form: {
        groupId: null,
        label: null,
        navigationTypeEnum: null,
        pNavId: null,
        rank: null,
        name: null,
        val: null
      },
      dialogVisible: false, // 一级隐藏
      dialogVisible_third: false, // 三级隐藏
      activeName: '', // 二级菜单名
      save_or_edit: 1, // 1保存 2修改
      // 四级导航
      four_menu: {
        tagsKindList: '', // 左侧导航
        tagsList: '' //  右侧导航
      },
      // 四级导航选中数据
      four_active: {
        first_index: 0,
        second_index: 0,
        third_index: 0,
        third_checkboxGroup: [],
        four_checkboxGroup: [],
        name: ''
      }
    };
  },
  watch: {
    first_menu: {
      deep: true,
      handler (data) {
        this.first_menu = data;
      }
    }
  },
  created () {
    console.log('first_menu');
    findFirstRankNavigation()
      .then(res => {
        this.subject_data = res.data;
      })
      .catch(error => {
        this.loading = false;
      });
  },
  methods: {
    // 选中一级分类
    subjectActive (item, index) {
      item.index = index;
      console.log(item);
      this.first_menu = '';
      const data = {
        pNavId: item.navId
      };
      this.pNavId = item.navId;

      findNavigationByFirstRank(data)
        .then(res => {
          // _this.subject_data = res.data
          this.subject_active = item;
          if (res.data[0].rank !== 3) {
            res.data.map(item => {
              item.switchs = true;
            });
            this.first_menu = res.data;
            // this.activeName = this.first_menu[0].navId; // 默认第一个栏目
            this.activeName = 0; // 默认第一个栏目

            console.log('this.pNavId:', this.pNavId);
            console.log('this.activeName:', this.activeName);
          } else {
            this.first_menu = [{
              switchs: true,
              subNavigationList: res.data
            }];
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    handleChange (value) {
      console.log(value);
      console.log(this.$refs.myCascader.getCheckedNodes()[0].pathLabels);
      var pathLabels = this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
      this.form.label = pathLabels[pathLabels.length - 1];
      this.level = value;
      this.value_third = value;
    },
    handleClose (done) {
      this.closeThird();
      this.closeCommen();
    },
    // 关闭三级菜单，重置数据
    closeThird () {
      this.dialogVisible_third = false;
      this.value_third = '';
    },
    // 关闭一级菜单表单
    closeCommen () {
      this.dialogVisible = false;
      this.dialogVisible_third = false;
      this.value_third_name = '';
      this.value_third = '';
      this.form = {
        groupId: '',
        label: '',
        navigationTypeEnum: '',
        pNavId: '',
        rank: '',
        name: '',
        val: ''
      };
    },

    // 删除四级标签
    handleCloseTag (item, tagIndex, indexs, index) {
      console.log(item, tagIndex, indexs, index);

      var navId = this.first_menu[index].subNavigationList[indexs].navId;

      const msg = '确认是否删除该标签！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteNavigationTags(item.navTagsId)
            .then(res => {
              this.first_menu[index].subNavigationList[indexs].navigationTagsVoList.splice(tagIndex, 1);
            })
            .catch(error => {
              this.loading = false;
            });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    },

    // 打开四级分类弹窗
    openThirdDialog (item, index, indexs) {
      console.log('打开:', item);
      this.dialogVisible_third = true;
      this.four_active.navId = item.navId;
      // this.four_menu = four_data; // 测试数据
      this.four_first_index = indexs;
      this.four_second_index = index;

      this.checkArr = item.navigationTagsVoList;
      findTags({ navId: item.navId })
        .then(res => {
          this.four_menu.tagsKindList = res.data.tagsKindList;
          this.four_menu.tagsList = res.data.tagsList;

          // 选中
          item.navigationTagsVoList.map(tags => {
            this.four_menu.tagsList[this.four_active.first_index].tagsVoList.map(item => {
              if (item.tagsId === tags.tagsId) {
                item.checked = true;
              }
            });
          });
          // 选中
          item.navigationTagsVoList.map(tags => {
            this.four_menu.tagsList[this.four_active.first_index].tagsVoList[this.four_active.second_index].sub.map(item => {
              console.log('item:', item.tagsId);
              if (item.tagsId === tags.tagsId) {
                console.log(item.tagsId, tags.tagsId);
                item.checked = true;
              }
            });
          });

          console.log(this.four_menu.tagsList[this.four_active.first_index].tagsVoList);

          console.log('tagsList', this.four_menu.tagsList);
          console.log('this.four_active:', this.four_active);
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 四级切换
    fourActive (item, index, four_index) {
      this.four_active[four_index] = index;
      switch (four_index) {
        case 'first_index': // 第一级联
          this.four_active.second_index = 0;
          this.four_active.third_index = 0;
          break;
        case 'second_index': // 第二级联
          this.four_active.third_index = 0;
          break;
        case 'third_index': // 第三级联
          break;
      }
      findTags({
        navId: this.four_active.navId,
        tagsKindCode: item.TagsKindCode ? item.TagsKindCode : this.four_menu.tagsKindList[this.four_active.first_index].TagsKindCode
      })
        .then(res => {
          // console.log(res.data);
          this.four_menu.tagsList = res.data.tagsList;

          if (this.four_menu.tagsList[this.four_active.first_index].tagsVoList && this.four_menu.tagsList[this.four_active.first_index].tagsVoList.length > 0) {
            // 选中
            this.checkArr.map(tags => {
              this.four_menu.tagsList[this.four_active.first_index].tagsVoList.map(item => {
                if (item.tagsId === tags.tagsId) {
                  item.checked = true;
                }
              });
            });
          }

          if (this.four_menu.tagsList[this.four_active.first_index].tagsVoList[this.four_active.second_index].sub && this.four_menu.tagsList[this.four_active.first_index].tagsVoList[this.four_active.second_index].sub.length > 0) {
            // 选中
            this.checkArr.map(tags => {
              this.four_menu.tagsList[this.four_active.first_index].tagsVoList[this.four_active.second_index].sub.map(item => {
                if (item.tagsId === tags.tagsId) {
                  item.checked = true;
                }
              });
            });
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 四级菜单表单提交
    submitThird (index) {
      // console.log(this.four_active);
      var objArr = [];
      var arr = this.four_active.third_checkboxGroup.concat(
        this.four_active.four_checkboxGroup
      );
      arr.map(item => {
        var obj;
        this.four_menu.tagsList[this.four_active.second_index].tagsVoList.map(
          items => {
            if (items.tagsId === item) {
              obj = {
                tagsId: items.tagsId,
                tagsName: items.tagsName
              };
              objArr.push(obj);
            }

            if (items.sub && items.sub.length > 0) {
              items.sub.map(subItem => {
                if (subItem.tagsId === item) {
                  obj = {
                    tagsId: subItem.tagsId,
                    tagsName: subItem.tagsName
                  };
                  objArr.push(obj);
                }
              });
            }

            this.four_active.third_checkboxGroup = [];
            this.four_active.four_checkboxGroup = [];
          }
        );
      });
      if (objArr.length > 0) {
        if (this.isClick) {
          this.isClick = false;
          createNavigationTags({
            navId: this.four_active.navId,
            tagsVoList: objArr
          })
            .then(res => {
              this.listByKind = res.data;
              if (this.first_menu[this.four_first_index].subNavigationList[this.four_second_index].navigationTagsVoList === undefined) {
                this.$set(this.first_menu[this.four_first_index].subNavigationList[this.four_second_index], 'navigationTagsVoList', new Array());
              }

              var navigationTagsVoList = this.first_menu[this.four_first_index].subNavigationList[this.four_second_index].navigationTagsVoList;

              this.first_menu[this.four_first_index].subNavigationList[this.four_second_index].navigationTagsVoList = this.first_menu[this.four_first_index].subNavigationList[this.four_second_index].navigationTagsVoList.concat(objArr);
              this.dialogVisible_third = false;
              this.isClick = true;
              this.closeCommen();
            })
            .catch(error => {
              this.loading = false;
            });
        }
      } else {
        this.dialogVisible_third = false;
      }
    },
    // 打开公共弹窗
    open (index) {
      if (!this.subject_active && index !== 'subject') {
        this.$message.error('请选择一级分类');
        return;
      }
      this.dialogVisible = true;
      this.add_select = index;
      this.save_or_edit = 1;
      this.value_addOrEdit = false;
      this.value_third_name = '';
      // console.log('打开公共弹窗:', this.activeName, this.add_select);
      // console.log('this.pNavId:', this.pNavId);
      // console.log('first_menu:', this.first_menu);
      // console.log('二级选择.activeName:', this.activeName, this.pNavId);
    },
    // 公共弹窗 - 确定按钮
    submitFirstMenu () {
      var items = [];
      // console.log(this.value_third);
      console.log('level:', this.level, this.form);

      if (this.level[0] !== 'CUSTOM') {
        items.push({
          code: this.level[this.level.length - 1]
        });
      } else {
        items.push({
          code: ''
        });
      }
      let obj;
      console.log(this.subject_active, 'this.add_select:', this.add_select, items);

      if (this.isClick) {
        this.isClick = false;
        if (this.save_or_edit === 1) {
          var level = this.level[0];

          console.log('二级选择.activeName:', this.activeName, this.pNavId);

          var groupId;
          if (this.level[0] !== 'CAGEGORY') {
            groupId = '';
          } else {
            groupId = this.level[1];
          }
          var itemCodeVal;// 新增-最终选择的itemCode
          itemCodeVal = this.level[0] !== 'CUSTOM' ? this.level[this.level.length - 1] : '';
          switch (this.add_select) {
            case 'subject': // 主要分类
              // this.subject_data.push(this.form)
              obj = {
                groupId: groupId,
                label: this.form.label,
                navigationTypeEnum: level,
                pNavId: this.pNavId,
                rank: 1,
                val: itemCodeVal
              };
              break;
            case 'first_menu': // 二级分类
              obj = {
                groupId: groupId,
                label: this.form.label,
                navigationTypeEnum: level,
                pNavId: this.pNavId,
                rank: 2,
                val: itemCodeVal
              };
              break;
            case 'third_menu': // 三级分类
              if (this.first_menu && this.first_menu.length > 0) {
                this.pNavId = this.first_menu[this.activeName].navId;
              }
              obj = {
                groupId: groupId,
                label: this.form.label,
                navigationTypeEnum: level,
                pNavId: this.pNavId,
                rank: 3,
                val: itemCodeVal
              };

              break;
          }

          // 添加
          createRankNavigation(obj)
            .then(res => {
              // this.listByKind = res.data
              switch (this.add_select) {
                case 'subject': // 主要分类
                  this.subject_data.push(res.data);
                  break;
                case 'first_menu': // 二级分类
                  if (this.first_menu.length <= 0) {
                    this.first_menu = [];
                    this.first_menu.push({});
                  }
                  res.data.subNavigationList = [];
                  this.first_menu.push(res.data);
                  this.activeName = this.first_menu.length <= 1 ? this.first_menu[0].navId : 0;
                  break;
                case 'third_menu': // 三级分类
                  if (this.first_menu.length <= 0) {
                    this.first_menu = [];
                    this.first_menu.push({});
                    this.activeName = 0;
                  }

                  if (this.first_menu[this.activeName].subNavigationList === undefined) {
                    this.$set(this.first_menu[this.activeName], 'subNavigationList', new Array());
                  }
                  this.first_menu[this.activeName].subNavigationList.push(res.data);
                  break;
              }
              this.isClick = true;
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.closeCommen();
            })
            .catch(error => {
              this.closeCommen();
              this.loading = false;
            });
        } else {
          switch (this.add_select) {
            case 'subject': // 主要分类
              // this.subject_data.push(this.form)
              obj = {
                groupId: this.form.groupId,
                navigationTypeEnum: this.form.navigationTypeEnum,
                pNavId: this.form.pNavId,
                rank: 1,
                val: this.form.val
              };
              break;
            case 'first_menu': // 二级分类
              obj = {
                groupId: this.form.groupId,
                label: this.form.label,
                navigationTypeEnum: this.form.navigationTypeEnum,
                pNavId: this.form.pNavId,
                rank: 2,
                val: this.form.val
              };
              break;
            case 'third_menu': // 三级分类
              obj = {
                groupId: this.form.groupId,
                label: this.form.label,
                navigationTypeEnum: this.form.navigationTypeEnum,
                pNavId: this.form.pNavId,
                rank: 3,
                val: this.form.val
              };

              break;
          }
          obj.navId = this.form.navId;
          updateRankNavigation(obj).then(res => {
            switch (this.add_select) {
              case 'subject': // 主要分类'
                this.subject_data.splice(this.subject_active, 1, obj);
                break;
              case 'first_menu': // 二级分类
                this.first_menu[this.editNavInx].label = obj.label;
                // this.first_menu.splice(this.editNavInx, 1, res.data);
                break;
              case 'third_menu': // 三级分类
                this.first_menu[this.editNavInx2].subNavigationList[this.editNavInx].label = obj.label;
                break;
            }
            console.log('this.add_select:', this.add_select);

            this.isClick = true;
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.closeCommen();
          }).catch(error => {
            this.closeCommen();
            this.loading = false;
          });
        }
      }
    },
    // 编辑导航项
    editNav (type, item, index, inx) {
      console.log(type, item.navigationTypeEnum, 'item:', item);
      this.form = JSON.parse(JSON.stringify(item));
      this.value_addOrEdit = true;
      this.editNavInx = index;
      this.editNavInx2 = inx;
      this.value_third = '';
      this.value_third_name = '';
      // this.value_third = 'CUSTOM';
      var _this = this;
      if (item.groupId && item.navigationTypeEnum === 'CAGEGORY') {
        listByKind({
          dictKind: item.groupId
        })
          .then(res => {
            // this.options[0].children.map(items => {
            //   if (items.value === item.groupId) {
            //     items.children = res.data;
            //   }
            // });
            var options = this.options[0];

            this.dialogVisible = true;
            var groupName = options.children.filter(group => group.value === item.groupId)[0];
            var items = res.data.filter(data => data.code === item.val)[0];

            this.value_third_name = '分类/' + groupName.label + '/' + items.name;
          })
          .catch(error => {
            this.loading = false;
          });
      } else if (item.navigationTypeEnum === 'CUSTOM') {
        _this.dialogVisible = true;
        this.value_third_name = '自定义';
      } else {
        _this.dialogVisible = true;
        var options = this.options[1];
        this.dialogVisible = true;
        var groupName = options.children.filter(group => group.value === item.val)[0];
        this.value_third_name = '平台功能/' + groupName.label;
        // this.value_third_name = '分类/' + groupName.label + '/' + items.name;
      }
      this.add_select = type;
      this.save_or_edit = 2;
      this.subject_active = index; // 一级

      var arr = new Array();
      arr[0] = 'CUSTOM';
      this.level = arr;
    },

    // 导航删除
    deleteSecondNav (targetName, action) {
      var indexs;
      for (var i in this.first_menu) {
        if (this.first_menu[i].navId === targetName) {
          indexs = i;
        }
      }
      if (action === 'remove') {
        var item = {
          navId: targetName,
          rank: 2
        };
        const msg = '确认是否删除该导航项！';
        this.$confirm(msg, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteNavigation(item.navId)
              .then(res => {
                // console.log(res, 'succ');
                this.first_menu.splice(indexs, 1);
                this.activeName = this.first_menu[0].navId; // 默认第一个栏目
              })
              .catch(error => {
                this.loading = false;
              });
          })
          .catch(() => {
            // 取消操作
            console.log('cancel');
          });
      }
    },
    // 删除导航项
    deleteNav (item, index, inx) {
      const msg = '确认是否删除该导航项！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteNavigation(item.navId)
            .then(res => {
              switch (item.rank) {
                case 1: // 主要分类
                  this.subject_data.splice(index, 1);
                  break;
                case 2: // 二级分类
                  this.first_menu.splice(index, 1);
                  break;
                case 3: // 三级分类
                  this.first_menu[inx].subNavigationList.splice(index, 1);
                  break;
              }
            })
            .catch(error => {
              this.loading = false;
            });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card-height {
  height: 700px;
}

.icon-hover:hover {
  color: red;
  background-color: transparent;
}
.btu-position {
  position: relative;
  bottom: 50px;
  height: 20px;
  width: 100%;
  text-align: center;
}
.scrollbar-height {
  height: 600px;
  overflow: auto;

  .margin10 {
    display: flex;
    .fl {
      flex: 1;
    }
  }
  > div {
    line-height: 36px;
    .fl {
      cursor: pointer !important;
    }
  }
  &__tag {
    height: 550px;
    overflow: auto;
  }

  .subject_active {
    background-color: #eee;
  }
}
.btu_position__wrap {
  position: relative;
  bottom: 50px;
  height: 20px;
  width: 100%;
  text-align: center;
}

.four-menu-box {
  display: flex;
  justify-content: space-between;
  .four-menu-left {
    border: 1px solid #eee;
    width: 200px;
    padding: 15px;
    margin: 10px;
    height: 300px;
    overflow: auto;
    li {
      line-height: 40px;
      cursor: pointer;
    }
    .active {
      background-color: #eee;
    }
  }
  .four-menu-right {
    flex: 1;
  }
}
</style>
